<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script src="https://peteroupc.github.io/colorpicker/cbox.js"></script>
<script src="shaderlib.js"></script>
</head>
<body>
<p style="position:absolute;left:0;top:1em">
Black Color: <input type=color value="#EEEEEE" id=blackcolor><br>
White Color: <input type=color value="#EECCCC" id=whitecolor><br>
</p>
<canvas id=canvas></canvas>
<script id="vertex" type="x-shader/x-shader">
precision mediump float;
attribute vec3 position;
varying vec2 posVar;
void main(){
 posVar=position.xy;
 gl_Position=vec4(position,1.0);
}
</script>
<script id="fragment" type="x-shader/x-shader">
precision mediump float;
uniform vec3 blackColor;
uniform vec3 whiteColor;
varying vec2 posVar;
uniform float squaresPerRow;
void main(){
 vec2 pos=mod(posVar*squaresPerRow,4.0);
 float sgn=(pos.x>=2.0 ? 1.0 : -1.0)*(pos.y>=2.0 ? 1.0 : -1.0);
 float s=(sgn>0.0) ? 1.0 : 0.0;
 vec3 color=mix(blackColor,whiteColor,s);
 gl_FragColor=vec4(color,1.0);
}
</script>

<script id="demo">
/* global H3DU */
var vertexShader = document.getElementById("vertex").textContent;
var fragmentShader = document.getElementById("fragment").textContent;

var scene = new H3DU.Scene3D(document.getElementById("canvas"));
var shader = new H3DU.ShaderInfo(vertexShader, fragmentShader);
shader.setUniforms({
  "blackColor":H3DU.toGLColor(document.getElementById("blackcolor").value).slice(0, 3),
  "whiteColor":H3DU.toGLColor(document.getElementById("whitecolor").value).slice(0, 3),
  "squaresPerRow":8
});
document.getElementById("blackcolor").addEventListener("change",
   function(e) {
     "use strict";
     shader.setUniforms({"blackColor":H3DU.toGLColor(e.target.value).slice(0, 3)});
   });
document.getElementById("whitecolor").addEventListener("change",
   function(e) {
     "use strict";
     shader.setUniforms({"whiteColor":H3DU.toGLColor(e.target.value).slice(0, 3)});
   });
var batch = quadBatch(shader);
var time=0
H3DU.renderLoop(function() {
  "use strict";
  scene.render(batch);
});
</script>
</body>
